<template>
  <div class="contents">
    <PanelTitle title="肥力分析" />
    <div class="mt infos">
      <div ref="maps" class="maps"></div>
      <table>
        <thead>
          <tr>
            <th>指标名称</th>
            <th>推荐标准</th>
            <th>达标率</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in listData">
            <td>{{ item.name }}</td>
            <td>{{ item.norm }}</td>
            <td>{{ item.normRatio }}%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import "echarts-liquidfill";
import liquidFillBg from "@/assets/ball.png";

const maps = ref(null);
let listData = ref([]);

onMounted(async () => {
  
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/fertility/analysis",
    method: "get",
    params: { yearly : new Date().getFullYear() },
  });

  listData.value = res.data.slice(0, 5);
  let rate = res.data[0].normRatio

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    title: {
      left: "center",
      subtext: "土地肥力达标率",
      subtextStyle: {
        //文字样式
        color: "#fff",
        fontSize: fitChartSize(10),
        fontWeight: 600,
      },
      // itemGap: 10, //主副标题间距
      top: fitChartSize(45),
      // textStyle: {
      //   color: "#333",
      //   fontWeight: "normal",
      //   fontSize:fitChartSize(14),
      // },
    },
    graphic: {
      type: "image",
      id: "background",
      left: "center",
      top: "center",
      z: fitChartSize(-10),
      bounding: "raw",
      origin: [fitChartSize(200), fitChartSize(200)],
      style: {
        image: liquidFillBg, // 背景图片地址
        width: fitChartSize(145),
        height: fitChartSize(145),
        opacity: 1,
      },
    },
    series: [
      {
        type: "liquidFill", //设置图表类型
        data: [
          {
            value: [rate / 100],
            label: {
              normal: {
                formatter: `${rate}%`,
                show: true,
              },
            },
          },
        ], // 设置水位，值为0到1之间
        radius: "80%", // 设置图的大小
        color: "rgba(68, 197, 253, .1)", //设置波形颜色
        outline: {
          // show: false,
          borderDistance: 0,
          itemStyle: {
            color: "none", // 边框距离水波图以及边框的背景颜色颜色
            borderWidth: 6, // 图例图形的描边
            borderColor: "rgba(5,220,226,0.5)", // 图例图形描边的颜色
          },
        },
        amplitude: 4, // 水波的振幅大小
        backgroundStyle: {
          // borderColor: "rgba(5,220,226,0.1)",
          // borderWidth: 6,
          color: "rgba(5,220,226,0.5)", // 背景色
        },
        label: {
          normal: {
            // align: "center",
            // position: "inside",
            baseline: "top",
            padding: [0, 0, 0, 0],
            textStyle: {
              color: "#fff", //标签文本颜色
              insideColor: "#fff",
              fontSize: fitChartSize(26),
            },
          },
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 50%;
}
.infos {
  display: flex;
  align-content: center;
  margin: 0 vw(10);
}

table,
td,
tr,
th {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;
  font-size: vh(9);
}
table {
  width: 50%;
  margin: vw(6) 0;
}
th {
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(50, 200, 167, 0.45),
    rgba(50, 200, 167, 0.05)
  );
  font-size: vh(10);
  padding: vh(6) 0;
}
td {
  color: #2cd7bc;
  text-align: center;
  font-size: vh(10);
  padding: vh(6) vw(3);
}
</style>